<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        *{margin: 0px;padding: 0px;}
        body {
            color: #4d5259;
            line-height: 1.5;
            font-size: 14px;
            overflow-x: hidden;
            background-color: #f5f6fa;
        }
        #logo{
            font-size: 24px;
            font-weight: 900;
            font-family: "方正彩云简体";
            text-align: center;
            line-height: 64px;
            color: yellow;
        }
        a:hover,
        a:focus {
            color: #4d5259;
            text-decoration: none;
            outline: none
        }
        a:hover,
        a:focus,
        a:active {
            text-decoration: none;
        }
        a,
        button,
        a:focus,
        a:active,
        button:focus,
        button:active {
            outline: none !important;
        }
        /** ----------------------------------
         * 左侧导航
         -------------------------------------- */
        .lyear-layout-sidebar {
            position: fixed;
            top: 0;
            bottom: 0;
            z-index: 5;
            display: block;
            width: 240px;
            font-weight: 500;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transition: 0.3s transform;
            transition: 0.3s transform;
            transform: translateX(0);
            -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.08);
            -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.08);
            box-shadow: 0px 0px 5px rgba(0,0,0,0.08);
        }
        .lyear-layout-sidebar-close .lyear-layout-sidebar {
            transform: translateX(-100%);
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }
        .lyear-layout-sidebar-close .lyear-layout-header,
        .lyear-layout-sidebar-close .lyear-layout-content {
            padding-left: 0px;
        }
        .lyear-layout-sidebar-scroll {
            height: -moz-calc(100% - 68px);
            height: -webkit-calc(100% - 68px);
            height: calc(100% - 68px);
            position: relative;
            background-color: #fff;
        }
        /* 侧边栏开关 */
        .lyear-aside-toggler {
            margin-right: .25rem;
            padding: .25rem .95rem .25rem .25rem;
            line-height: 1.5;
            cursor: pointer;
        }
        .lyear-aside-toggler .lyear-toggler-bar {
            display: block;
            height: 2px;
            width: 20px;
            background-color: #4d5259;
            margin: 4px 0px;
            -webkit-transition: 0.3s;
            transition: 0.3s;
        }
        .lyear-aside-toggler .lyear-toggler-bar:nth-child(2) {
            width: 15px;
        }
        .lyear-aside-toggler:hover .lyear-toggler-bar:nth-child(2) {
            width: 20px;
        }
        .lyear-layout-sidebar-close .lyear-aside-toggler .lyear-toggler-bar {
            width: 20px;
        }
        /* 左侧版权信息 */
        .sidebar-footer {
            bottom: 0;
            width: 100%;
            height: 96px;
            border-top: 1px solid rgba(77,82,89,0.05);
            margin-top: 24px;
            padding-top: 24px;
            padding-right: 24px;
            padding-bottom: 24px;
            padding-left: 24px;
            font-size: 13px;
            line-height: 24px;
        }
        /** ----------------------------------
         * 头部信息
         -------------------------------------- */
        .lyear-layout-header {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 4;
            padding-left: 240px;
            background-color: #fff;
            -webkit-transition: padding 0.3s;
            transition: padding 0.3s;
            -webkit-box-shadow: 4px 0 5px rgba(0, 0, 0, 0.035);
            -moz-box-shadow: 4px 0 5px rgba(0, 0, 0, 0.035);
            box-shadow: 4px 0 5px rgba(0, 0, 0, 0.035);
        }
        .lyear-layout-header .navbar {
            position: relative;
            min-height: 64px;
            margin-bottom: 0;
            border: 0px;
            -webkit-border-radius: 0px;
            -moz-border-radius: 0px;
            border-radius: 0px;
        }
        .lyear-layout-header .navbar-default {
            background-color: transparent;
        }
        .topbar {
            display: -webkit-box;
            display: flex;
            -webkit-box-pack: justify;
            justify-content: space-between;
            -webkit-box-align: center;
            align-items: center;
            min-height: 64px;
            padding: 0 15px;
        }
        .topbar .topbar-left {
            display: -webkit-box;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
        }
        .topbar .topbar-right {
            display: -webkit-box;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: reverse;
            flex-direction: row-reverse;
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
        .topbar-right > li > a {
            position: relative;
            display: block;
            padding: 10px 0px 10px 15px;
        }
        .navbar-page-title {
            margin-right: 20px;
            padding-top: 20px;
            padding-bottom: 20px;
            font-size: 16px;
        }
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
        #body{
            padding-left: 50px;
            padding-right: 0px;
        }
        #iframe{
            width: 1380px;
            height: 620px;
            border: 0;
        }
         .avatar-uploader .el-upload {
             border: 1px dashed #d9d9d9;
             border-radius: 6px;
             cursor: pointer;
             position: relative;
             overflow: hidden;
         }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 120px;
            height: 120px;
            line-height: 120px;
            text-align: center;
        }
        .avatar {
            width: 120px;
            height: 120px;
            display: block;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <header class="lyear-layout-header">
                <div class="topbar">
                    <!-- 左上标题 -->
                    <div class="topbar-left">
                        <div class="lyear-aside-toggler">
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> {{adminInfo.aname}} </span>
                    </div>
                    <!-- 右上超链接 -->
                    <el-dropdown :hide-on-click="false">
	            <span class="el-dropdown-link">
	              下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
	            </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item ><span @click="updateInfo()">修改信息</span></el-dropdown-item>
                            <el-dropdown-item ><span @click="clickCheckPassword()">修改密码</span></el-dropdown-item>
                            <el-dropdown-item ><span @click="logOut()">退出登录</span></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </header>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <div class="lyear-layout-container">
                <!--左侧导航-->
                    <div style="margin-bottom: 20px;">
                        <aside class="lyear-layout-sidebar">
                        <!-- logo -->
                            <div id="logo" class="sidebar-header" style="height: 64px;">
                                <span>好医生后台管理系统</span>
                            </div>
                            <div class="demo-image__preview" style="width:120px ; height: 120px ;margin: 15px auto;box-shadow: 0 8px 12px 4px rgba(0, 0, 0, 0.4); border-radius:90px;">
                                <el-upload
                                        class="avatar-uploader"
                                        action="http://localhost:8080/demo/admin/updateHeadImg"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload">
                                    <img v-if="url" :src="url" class="avatar" style="width:120px ; height: 120px ;border-radius:90px;">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </div>
                            <div class="lyear-layout-sidebar-scroll ps" style="text-align: center">
                                <el-container style="height: 580px; border: 1px solid #eee">
                                    <el-aside style="width: 240px; background-color: rgb(238, 241, 246)">
                                        <el-menu
                                            default-active="2"
                                            class="el-menu-vertical-demo"
                                            background-color="#ffffff"
                                            text-color="#000000"
                                            active-text-color="#ffd04b">
                                            <el-submenu v-for="(a,i) in adminMenu" v-bind:index="a.id" >
                                                <template slot="title" >
                                                    <i :class="a.icon"></i>
                                                    <span>{{a.pname}}</span>
                                                </template>
                                                <el-menu-item-group>
                                                    <template slot="title" >
                                                        <el-menu-item v-for="(s,si) in a.subMenu"  v-bind:index="s.id" @click="addTab(s)">
                                                            <i :class="s.icon"></i>
                                                            {{s.pname}}
                                                        </el-menu-item>
                                                    </template>
                                                </el-menu-item-group>
                                            </el-submenu>
                                        </el-menu>
                                    </el-aside>
                                </el-container>
                            </div>
                        </aside>
                    </div>
                </div>
                <!--End 左侧导航-->
            </el-aside>
            <el-main >
                <!--页面主要内容-->
                    <main id="body" class="lyear-layout-content">
                        <el-tabs  v-model="editableTabsValue" type="card" closable  @tab-remove="removeTab" >
                            <el-tab-pane
                                    key="0"
                                    label="个人信息"
                                    name="0">
                                <div style="border-radius: 4px ; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);"
                                >
                                    <el-descriptions class="margin-top" title="基本信息" :column="2"  border>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    <i class="el-icon-user"></i>
                                                    用户名
                                                </template>
                                                {{adminInfo.aname}}
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    <i class=""></i>
                                                    性别
                                                </template>
                                                {{adminInfo.asex}}
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    <i class="el-icon-mobile-phone"></i>
                                                    手机号
                                                </template>
                                                {{adminInfo.aphone}}
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    <i class=""></i>
                                                    学历
                                                </template>
                                                <el-tag >{{adminInfo.education.education}}</el-tag>
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    <i class="el-icon-chat-line-round"></i>
                                                    主要成就
                                                </template>
                                                {{adminInfo.aachievement}}
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    <i class=""></i>
                                                    科室
                                                </template>
                                                <el-tag >{{adminInfo.dept.dname}}</el-tag><el-tag >{{adminInfo.office.oname}}</el-tag><el-tag >{{adminInfo.role.rname}}</el-tag>
                                            </el-descriptions-item>
                                            <el-descriptions-item>
                                                <template slot="label">
                                                    <i class="el-icon-location-outline"></i>
                                                    家庭住址
                                                </template>
                                                {{adminInfo.aaddress}}
                                            </el-descriptions-item>
                                        <el-descriptions-item>
                                            <template slot="label">
                                                <i class=""></i>
                                                出生日期
                                            </template>
                                            {{adminInfo.abirthday}}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                            <template slot="label">
                                                <i class=""></i>
                                                入职日期
                                            </template>
                                            {{adminInfo.ahiredate}}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                            <template slot="label">
                                                <i class="el-icon-location-outline"></i>
                                                离职日期
                                            </template>
                                            {{adminInfo.adimission}}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                            <template slot="label">
                                                <i class="el-icon-mobile-phone"></i>
                                                座右铭
                                            </template>
                                            {{adminInfo.amotto}}
                                        </el-descriptions-item>
                                    </el-descriptions>
                                </div>
                                <div style="border-radius: 4px ; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); padding-top: 20px">
                                    <el-descriptions class="margin-top" title="个人简介" >
                                        <el-descriptions-item>
                                            {{adminInfo.abrief}}
                                        </el-descriptions-item>
                                    </el-descriptions>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane
                                    v-for="(item, index) in editableTabs"
                                    :key="item.id"
                                    :label="item.pname"
                                    :name="item.id">
                                <iframe id="iframe" :src="item.url"></iframe>
                            </el-tab-pane>
                        </el-tabs>
                    </main>
                <!--End 页面主要内容-->
            </el-main>
        </el-container>
    </el-container>

    <el-dialog title="修改密码" :visible.sync="updatePassword">
        <el-form id="checkPassFrom" :model="updatePass" :rules="rules" ref="updatePass">
            <el-form-item label="编号" prop="id" style="display: none">
                <el-input v-model="adminInfo.id" name="id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="旧密码" prop="password">
                <el-input type="password" v-model="updatePass.password" name="oldApassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="newPassword">
                <el-input type="password" v-model="updatePass.newPassword" name="apassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="重复密码" prop="checkPassword">
                <el-input type="password" v-model="updatePass.checkPassword" name="againPassword" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="updatePassword = false">取 消</el-button>
            <el-button type="primary" @click="checkPass()">修 改</el-button>
        </div>
    </el-dialog>


    <el-dialog title="修改个人信息" :visible.sync="clickCheckAdminInfo">
        <el-form id="checkadminInfoFrom" :model="adminInfo" :rules="rule" ref="updatAdminInfo">
            <el-form-item label="编号" prop="id" style="display: none">
                <el-input v-model="adminInfo.id" name="id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="aname" >
                <el-input v-model="adminInfo.aname" name="aname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="asex" >
                <el-input v-model="adminInfo.asex" name="asex" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="aphone" >
                <el-input oninput="this.value=this.value.replace(/\D/g,'')" v-model="adminInfo.aphone" name="aphone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="aidcard" >
                <el-input v-model="adminInfo.aidcard" name="aidcard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="个人简介" prop="abrief" >
                <el-input v-model="adminInfo.abrief" name="abrief" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="请选择学历" prop="education">
                <template>
                    <select style="width: 80px;" v-model="adminInfo.education.id" placeholder="请选择学历" name = "education">
                        <option  v-for="(g,i) in edoption"
                                 :label="g.education"
                                 :value="g.id">
                        </option>
                    </select>
                </template>
            </el-form-item>
            <el-form-item label="家庭住址" prop="aaddress" >
                <el-input v-model="adminInfo.aaddress" name="aaddress" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="主要成就" prop="aachievement" >
                <el-input v-model="adminInfo.aachievement" name="aachievement" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="座右铭" prop="amotto" >
                <el-input v-model="adminInfo.amotto" name="amotto" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="aage" >
                <el-input v-model="adminInfo.aage" name="aage" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="生日" prop="abirthday" >
                <el-input v-model="adminInfo.abirthday" name="abirthday" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="clickCheckAdminInfo = false">取 消</el-button>
            <el-button type="primary" @click="checkAdminInfo()">修 改</el-button>
        </div>
    </el-dialog>



</div>
<script >
    $.get("/demo/admin/getInfo",function (backData) {
        haha.adminMenu = backData.data.currentPermission;
        haha.adminInfo = backData.data.currentAdmin;
        haha.url = backData.data.currentAdmin.aphoto;
    });

    var haha = new Vue({
        el:"#app",
        data:{
            url: '',
            education:'',
            aeducation:'',
            clickCheckAdminInfo:false,
            edoption:[],
            getLog:{},
            updatePass:{
            },
            updatePassword:false,
            editableTabsValue:"0",
            editableTabs:[],
            adminMenu:[],
            adminInfo:{},
            rules:{
                password:[
                    { required: true, message: '请输入j旧密码', trigger: 'blur' },
                    { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
                ],
                newPassword:[
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
                ],
                checkPassword:[
                    { required: true, message: '请重复输入密码', trigger: 'blur' },
                    { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur'}
                ],
                aname: [
                    { required: true, message: '请输入员工姓名', trigger: 'blur' }
                ],
                education: [
                    { required: true, message: '请选择员工学历', trigger: 'blur' }
                ],
                asex: [
                    { required: true, message: '请选择员工性别', trigger: 'blur' }
                ],
                aphone:[
                    { required: true, message: '请检查手机号是否正确', trigger: 'blur' },
                    { min: 11, max: 11, trigger: 'blur'}
                ],
                aidcard:[
                    { required: true, message: '请检查身份证号是否正确', trigger: 'blur' },
                    { min: 18, max: 18, message: '', trigger: 'blur'}
                ]

            },
            rule:{
                aname: [
                    { required: true, message: '请输入员工姓名', trigger: 'blur' }
                ],
                education: [
                    { required: true, message: '请选择员工学历', trigger: 'blur' }
                ],
                asex: [
                    { required: true, message: '请选择员工学历', trigger: 'blur' }
                ],
                aphone:[
                    { required: true, message: '请检查手机号是否正确', trigger: 'blur' },
                    { min: 11, max: 11, trigger: 'blur'}
                ],
                aidcard:[
                    { required: true, message: '请检查身份证号是否正确', trigger: 'blur' },
                    { min: 18, max: 18, message: '', trigger: 'blur'}
                ]

            }
        },
        methods:{

            handleAvatarSuccess(res, file) {
                haha.url = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 10;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 10MB!');
                }

            },
            checkAdminInfo(){
                haha.$refs["updatAdminInfo"].validate((valid) => {
                    if (valid) {
                        var updatAdminInfo = new FormData(checkadminInfoFrom);
                        $.ajax({
                            url:"/demo/admin/updatAdminInfo",
                            type:"POST",
                            data:updatAdminInfo,
                            processData:false,
                            contentType:false,
                            success:function(backData){
                                if (backData.code == 1 ){
                                    haha.$notify.success({
                                        title: '温馨提示',
                                        message:"修改成功"
                                    });
                                    haha.clickCheckAdminInfo=false;
                                } else {
                                    haha.$notify.error({
                                        title: '温馨提示',
                                        message:backData.msg
                                    });
                                }
                            }
                        });
                    }
                });

            },
            updateInfo(){
                $.get("/demo/adminInfo/queryEducation",function (backData) {
                    haha.edoption = backData.data;
                });
                haha.clickCheckAdminInfo=true;
            },
            clickCheckPassword(){
                haha.updatePassword=true;
            },
            checkPass(){
                haha.$refs["updatePass"].validate((valid) => {
                    if (valid) {
                        var updatePasswordFrom = new FormData(checkPassFrom);
                        if ( updatePasswordFrom.apassword === updatePasswordFrom.againPassword ){
                            $.ajax({
                                url:"/demo/admin/checkPass",
                                type:"POST",
                                data:updatePasswordFrom,
                                processData:false,
                                contentType:false,
                                success:function(backData){
                                    if (backData.code == 1){
                                        $.get("/demo/admin/loginOut",function (backData) {
                                            window.location.href="/demo/admin/adminIndex.html";
                                        });
                                    } else{
                                        haha.$notify.error({
                                            title: '温馨提示',
                                            message:backData.msg
                                        });
                                    }
                                }
                            });
                        }else {
                            haha.$notify.error({
                                title: '温馨提示',
                                message:'两次输入密码不一致'
                            });
                        }
                    }
                });

            },
            logOut(){
                $.get("/demo/admin/loginOut",function (backData) {
                    window.location.href="/demo/admin/adminIndex.html";
                });
            },
            addTab(s){
                if(  haha.editableTabs.indexOf(s)<0){
                    haha.editableTabs.push(s);
                }
                haha.editableTabsValue = s.id;
            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.id;
                            }
                        }
                    });
                }
                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.id !== targetName);
            }

        }
    });
</script>

</body>
</html>
